<template>
  <div>
    <el-dialog
        v-model='dialogVisible'
        top='1vh'
        title='巡检详情'
        width='88%'
        @close='dialogVisible = false'
    >
      <div class='step'>
        <div class='title'>
          <h4><i class='line'></i>巡检进度</h4>
        </div>
        <div class='step-box'>
          <el-steps align-center>
            <el-step
                v-for='(item, index) in pointList'
                :key='index'
                :title="item?.pointName + ' - ' + item?.pointPosition"
                :status="pointStatus(item)"
                :description='item.dtoList?.[0]?.nfcTime'
            ></el-step>
          </el-steps>
        </div>
      </div>
      <div class='information'>
        <div class='title'>
          <h4><i class='line'></i>基本信息</h4>
        </div>
        <div class='box'>
          <div class='content'>
            <div class='item'>
              <div class='label'>巡检名称:</div>
              <span class='info'>{{ infoData.checkName }}</span>
            </div>
            <div class='item'>
              <div class='label'>巡检单号:</div>
              <span class='info'>{{ infoData.checkNo }}</span>
            </div>
            <!-- <div class="item">
              <div class="label">事件编号:</div>
              <span class="info">{{ infoData.orderNo }}</span>
            </div> -->
          </div>
          <div class='content'>
            <div class='item'>
              <div class='label'>巡检人:</div>
              <span class='info'>{{ infoData.checkUserName }}</span>
            </div>
            <div class='item'>
              <div class='label'>巡检人电话:</div>
              <span class='info'>{{ infoData.checkUserPhone }}</span>
            </div>
            <div class='item'>
              <div class='label'>其他巡检人员:</div>
              <span class='info' style='margin-left: 10px' v-for='item in infoData.userRelList' :key='item.checkUserId'>{{
                  item.checkUserName
                                                                                                                        }}</span>

            </div>
          </div>
          <div class='content'>
            <div class='item'>
              <div class='label'>签到时间:</div>
              <span class='info'>{{ infoData.startTime }}</span>
            </div>
            <div class='item'>
              <div class='label'>结束时间:</div>
              <span class='info'>{{ infoData.endTime }}</span>
            </div>
            <div class='item'>
              <div class='label'>巡检单状态:</div>
              <span class='info'>{{
                  infoData.sheetStatus === '1' ? '待申领' : ''
                  || infoData.sheetStatus === '2' ? '未开始' : ''
                  || infoData.sheetStatus === '3' ? '执行中' : ''
                  || infoData.sheetStatus === '4' ? '已结束' : ''
                  || infoData.sheetStatus === '5' ? '已逾期' : ''
                                 }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class='information'>
        <div class='title'>
          <h4><i class='line'></i>巡检过程</h4>
        </div>
        <div class='box1'>
          <div class='content'>
            <div class='item'>
              <div class='label'>巡检路线:</div>
              <span class='info'>{{ checkList?.routeName }}</span>
            </div>
          </div>
        </div>
        <div class='box2'>
          <el-collapse
              v-for='(item, index) in pointList'
              :key='index'
              v-model='activeNames'
              accordion
          >
            <el-collapse-item :title="[item.pointName] + ' - ' + item.pointPosition" :name='index'>
              <el-image
                  v-if='item.dtoList?.[0]?.fileList'
                  style="width: 250px; height: 130px"
                  :src="imgSrc(item)"
                  :zoom-rate="1.2"
                  :preview-src-list='[imgSrc(item)]'
                  :initial-index="1"
                  fit="cover"
              />
              <div class='dev-item' v-for='(part, index) in item?.dtoList?.[0]?.inspectionDtolist' :key='index'>
                <div class='coll-label'>巡检项{{ index + 1 }}:</div>
                <span class='coll-info'>{{ part.inspectionId }}</span>
                <span class='coll-status'>状态： <span v-if="part.inspectionValue === '1'"
                                                      style='color: green'>正常</span><span v-else style='color: red'>异常</span></span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model='dialogVisible1' title='图片预览' width='800' append-to-body>
      <img :src='dialogImageUrl' style='display: block; max-width: 100%; margin: 0 auto'/>
    </el-dialog>
  </div>
</template>

<script>
// import store from '/@/store/index.js'

export default {
  props: {
    infoData: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      dialogImageUrl: '',
      infoData: {},
      checkList: [],
      pointList: [],
      detailList: [],
      activeNames: ['1'],
      origin:''
    }
  },
  watch: {
    infoData(val) {
      if (val) {
        this.checkList = val?.routeVo
        this.pointList = val?.routeVo?.relList
        // this.pointList.forEach((item) => {
        //   item.detailList.forEach((val) => {
        //     item.relList.forEach((res) => {
        //       if (val.deviceNo == res.deviceNo) {
        //         val = Object.assign(val, res)
        //       }
        //     })
        //   })
        // })
      }
    }
  },
  mounted() {
    this.origin=window.location.origin
  },
  computed: {
    activeStatus() {
      let flag = this.pointList.every((item) => {
        return item.flag === '1'
      })
      if (flag) {
        return this.pointList.length
      } else {
        let idx = this.pointList.findIndex((item) => {
          return item.flag === '0'
        })
        return (idx === -1 && idx === 0) ? 0 : idx
      }
    },
  },
  methods: {
    previewImg(url) {
      this.dialogVisible1 = true
      this.dialogImageUrl = url
    },
    pointStatus(val) {
      if (val?.dtoList?.[0]?.inspectionValue === '0') {
        return 'error'
      } else if (val.flag === '1') {
        return 'success'
      } else if (val.flag === '0') {
        return 'wait'
      }
    },
    imgSrc(val){
      return this.origin + val.dtoList?.[0]?.fileList?.[0]?.url
    }
  }
}
</script>
<style scoped lang='scss'>
.step {
  width: 100%;
  height: 200px;

  .title {
    width: 100%;

    i {
      display: inline-block;
      width: 5px;
      height: 16px;
      background-color: #409eff;
      margin-right: 10px;
    }
  }
}

.information {
  width: 100%;
  // height: 230px;
  .title {
    width: 100%;

    i {
      display: inline-block;
      width: 5px;
      height: 16px;
      background-color: #409eff;
      margin-right: 10px;
    }
  }

  .box {
    width: 95%;
    padding: 30px 30px 20px;
    background-color: #f3f3f3;

    .content {
      width: 100%;
      display: flex;
      margin-bottom: 18px;

      .item {
        width: 33%;
        display: flex;

        .label {
          width: 90px;
          font-weight: 600;
          // padding-right: 10px;
        }

        .info {
          display: inline-block;
        }
      }
    }
  }

  .box1 {
    width: 95%;
    padding: 20px 30px 20px;
    background-color: #f6fcff;

    .content {
      width: 100%;
      display: flex;

      .item {
        width: 33%;
        display: flex;

        .label {
          width: 90px;
          font-weight: 600;
        }

        .info {
          display: inline-block;
        }
      }
    }
  }

  .box2 {
    width: 95%;
    overflow: hidden;
    height: 26vh;
    overflow-y: scroll;
    padding: 0 25px;

    .coll-item {
      display: flex;
      height: 25px;

      .coll-label {
        width: 60px;

        .coll-info {
          display: inline-block;
        }
      }
    }

    .dev-item {
      margin-top: 5px;
      display: flex;
      height: 25px;
      border-bottom: 1px dashed #ccc;

      .coll-label {
        width: 60px;
      }

      .coll-info {
        width: 50%;
        display: inline-block;
        padding-right: 20px;
      }
    }
  }
}

.coll-status {
  display: inline-block;
  padding-left: 50px;
}

.coll-pic {
  display: inline-block;
  color: rgb(231, 72, 15);
  padding-left: 50px;
  cursor: pointer;
}

// .el-form-item__label {
//   font-size: 18px !important;
// }
::v-deep .el-collapse-item__header {
  color: #409eff !important;
}

::v-deep.el-collapse-item__header.is-active {
  color: #409eff !important;
}

// ::v-deep .el-dialog {
//   // height: 100%;
//   // max-height: 100%;
// }
::v-deep .el-collapse {
  --el-collapse-header-height: 38px;
}


:deep(.el-steps) {
  overflow: hidden;
  overflow-x: scroll;
  display: block
}

:deep(.el-step.is-horizontal) {
  width: 17%;
  height: 160px;
  display: inline-table;
}

:deep(.el-step.is-center .el-step__head) {
  text-align: center;
}


:deep(.el-step__title) {
  //超出两行省略号
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  padding: 0 10px
}

:deep(.el-step__main) {
  white-space: inherit;
}
</style>
